<template>
    <div class="sites">
        <div class="header-panel">
            <div class="control">
                <div class="operations">
                        <el-button icon="check" type="primary">确认新增</el-button>
                </div>
                <div class="hero-title" >
                        新增焦点图
                </div>
                <div class="hero-link" >
                     <i class="el-icon-arrow-left"></i>返回列表
                </div>
            </div>
        </div>
        <div class="header-panel-addition inversed"></div>
        <div class="content">
            <el-form>
                <div class="flexbox half">
                    <el-form-item label="选择产品">
                        <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="域名">
                        <el-input placeholder='请添加已设置首页的域名'></el-input>
                    </el-form-item>
                    
                </div>
                <div class="flexbox quarter">
                    <el-form-item label="排序">
                        <el-input placeholder='数值越大越靠前'></el-input>
                    </el-form-item>
                </div>
                <div class="flexbox half">
                    <el-form-item label="描述">
                        <el-input type='textarea'></el-input>
                    </el-form-item>
                </div>
                <div class="flexbox quarter" style="flex-direction: column;">
                    <el-row class="form-row " :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="缩略图" class="form-caption"></el-form-item>
                            </el-col>
                            
                            <el-col :span="12">
                                <div @click='handleUpload'><el-form-item label="上传图片" class="form-upload-link right"></el-form-item></div>
                            </el-col>
                    </el-row>      
                    <el-row class="form-row upload" type='flex'>
                        <el-upload action="#" list-type="picture-card" :on-preview='void(0)' :file-list="img" :auto-upload='false'>
                                <el-button slot="trigger" size="small" type="primary"><span ref='uploadImg'>选取文件</span></el-button>
                        </el-upload>
                    </el-row>
                    
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                img: [{url: '64x64.png'}],
            }   
        }, methods:{
            handleUpload(){
                this.$refs.uploadImg.click();
            }
        }
    }
</script>